<template>
    <view class="search_wrap" :style="objColor">
        <!-- homeSub/pages/search/search.wxml -->
        <view class="search">
            <view class="search_box">
                <!-- 搜索框 -->
                <view class="weui-search-bar">
                    <view class="weui-search-bar__form">
                        <!-- 点击之后，出现input框 -->
                        <view class="weui-search-bar__box">
                            <view @tap="goLocation" class="weui-icon-search_in-box">
                                <image class="img1" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/add.png"></image>
                                <view class="locationName">{{ cityname || '请选择' }}</view>
                                <image class="img2" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/down.png"></image>
                            </view>
                            <input
                                type="text"
                                class="weui-search-bar__input"   
                                placeholder="请输入站点/地点名称"
                                :value="searchtxt"
                                @input="inputTyping"
                                confirm-type="search"
                                @confirm="searchclk"
                            />
                            <!-- 输入款字数大于0，则显示清除按钮 -->
                            <view class="weui-icon-clear" v-if="searchtxt.length > 0" @tap="clearInput">
                                <icon type="clear" size="16"></icon>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="search_txt" @tap="searchclk">搜索</view>
        </view>
        <view class="kobai"></view>
        

        <!-- 搜索文字dom -->
        <view class="search_dom" v-if="searchtxtDom">
            <text>以下为“{{ searchtxtDom }}”相关站点</text>
        </view>



        <!-- 站点信息 -->
        <view class="site_view">
            <siteListItem :itemData="siteItemData" @myevent="myevent" v-if="siteListShow"></siteListItem>

            <!-- 搜索结果 -->
            <Upgrading v-if="totalCount == 0" text1="暂无相关站点信息" icon="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/Illustration.png"></Upgrading>
            <view class="no_view" v-if="totalCount<5 && siteItemData.list.length>0">
                <text>没有更多了~</text>
            </view>
            <view class="look_view" v-if="totalCount>=5">
                <text @tap="goToSite">查看全部{{ totalCount }}个站点信息></text>
            </view>
        </view>
        
    </view>
</template>

<script>
'use strict';
import siteListItem from '@/components/site-list/site-list-item';
import Upgrading from '@/components/upgrading/upgrading';


import { indexStationNewV2, indexStationNewV2NoAuth, } from '@/api/mobileUpdate';



export default {
    components: {
        siteListItem,
        Upgrading,
    },
    // 生命周期函数--监听页面加载
    data() {
        return {
            searchtxt: '',
            searchtxtDom: '',
            cityname: '城市',

            siteListShow: true,
            //站点组件
            siteItemData: {
                list: []
            },
            page: 1,
			pages: 2,  
            totalCount: 0,
        };
    },
    onLoad: function (option) {
        console.log(option,'看看传过来的值')
        this.searchtxtDom = option.searchVal
        this.searchtxt = this.searchtxtDom

        uni.hideLoading(); // 城市
    },
    // 生命周期函数--监听页面显示
    onShow: function () {   
        this.citynameFun();

        uni.removeStorageSync('siteLabelSelection')
        uni.removeStorageSync('siteFiltering')

        this.getIndexStationNewV2('replace')
    },
    methods: {
        //查看全部站点
        goToSite: function() {
            uni.navigateTo({
                url: `/pages/siteListNew/siteListNew?searchVal=${this.searchtxt}`
            });
        },

        //城市
        citynameFun: function () {
            this.cityname = uni.getStorageSync('cityName') ? uni.getStorageSync('cityName'): uni.getStorageSync('currentCityName')
        },

        //定位
        goLocation: function () {
            uni.navigateTo({
                url: '../area/area'
            });
        },


        clearInput: function () {
            this.searchtxt= ''
        },

        inputTyping: function (e) {
            //搜索数据
            this.searchtxt=e.detail.value
        },

        // 搜索 获取站点
        searchclk: function () { 
			console.log(this.searchtxt);
            this.getIndexStationNewV2('replace')
            this.searchtxtDom = this.searchtxt
        },
        myevent: function(e) {
            console.log(e,'eeee');
            var data = e.detail;
            this.siteItemData = data;
        },
        // 获取站点列表v2
        getIndexStationNewV2: function (type) {
            console.log(type,'typeeee')
            uni.showLoading({
                title: '加载中'
            });
            var that = this;
            let siteFiltering = uni.getStorageSync('siteFiltering');
            let siteLabelSelection = uni.getStorageSync('siteLabelSelection');
            let tagFilter = {
                ...siteFiltering,
                ...siteLabelSelection
            }
            console.log(tagFilter,'searchNew==>>tagFilter.....')
            let datas = {
                "sellerId": getApp().globalData.sellerId,
                "areaId": uni.getStorageSync('cityId'),
                "latitude": uni.getStorageSync('latitude'),
                "longitude": uni.getStorageSync('longitude'),
                "current": this.page,
                "pageSize": 5,
                "keyword": this.searchtxt,
                "sortMode": 3,
                "isCollect": false,
                ...tagFilter,
            }
            console.log(datas,'searchNew站点筛选条件.....');

            let getApiUrl = uni.getStorageSync('token') ? indexStationNewV2 : indexStationNewV2NoAuth
				getApiUrl({...datas}).then(res=>{
                console.log(res,'站点列表v2')
                console.log(res,'站点==>stationData*********');
                uni.hideLoading()
                if (res.code == 0) {
                    that.setData({
                        page: res.data.pageNo,
                        pages: res.data.pages,
                        totalCount: res.data.totalCount,
                    });

                    var list = res.data.data || []; // 没有数据不操作

                    if (list.length == 0 && res.data.pageNo == 1) {
                        that.setData({
                            'siteItemData.list': [],
                        });
                        return false;
                    }

                    if (type === 'replace') {
                        that.setData({
                            'siteItemData.list': list,
                        });
                    } else {
                        that.setData({
                            'siteItemData.list': that.siteItemData.list.concat(list),
                        });
                    }

                } else {
                    that.siteItemData.list = []

                    that.totalCount = 0
                }
            })
        },
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        this.siteListShow = false;

        this.setData({
            page: 1,
            pages: 1,
            'siteItemData.list': []
        });
        this.getIndexStationNewV2('replace')
        this.siteListShow = true
        
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 1500);
    },
    //  * 页面上拉触底事件的处理函数
    onReachBottom: function () {
        console.log("不做处理...,调往下个页面看更多")
        // let page = this.page + 1;

        // if (this.page < this.pages) {
        //     this.setData({
        //         page
        //     });
        //     this.getIndexStationNewV2('');
        // }
    },
};
</script>
<style lang="less" scoped>
@import "./searchNew.less";
@import "../../../commin/commin.less";

page {
    background-color: #F5F7FA;
}
.search_wrap {
	background-color: #F5F7FA;
	min-height: 100vh;
}

.search {
    position: fixed;
    width: 100%;
    // #ifndef H5
    top:0;
    // #endif

    // #ifdef H5
    top: calc(44px + env(safe-area-inset-top));
    // #endif
    z-index: 99;
    display: flex;
    background-color: @white-color;
    align-items: center;
    .paddings(17rpx, 33rpx, 24rpx, 26rpx);

    .search_box {
        .kuangao(610rpx, 70rpx);
    }

    .weui-search-bar {
        display: flex;
    }

    .weui-icon-search {
        margin-right: 8px;
        font-size: inherit;
    }

    .weui-icon-search_in-box {
        position: absolute;
        left: 0rpx;
        top: 12rpx;
        display: flex;
        align-items: center;

        .locationName {
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color2;
            margin: -5rpx 8rpx;
            width: 100rpx;
            overflow: hidden; //溢出隐藏
            white-space: nowrap; //禁止换行
            text-overflow: ellipsis; //...
        }

        .img1 {
            .kuangao(23rpx, 30rpx);
        }

        .img2 {
            .kuangao(25rpx, 25rpx);
        }
    }

    .weui-search-bar__text {
        display: inline-block;
        font-size: 14px;
        vertical-align: middle;
    }

    .weui-search-bar__form {
        flex: auto;
        background: #F5F7FA;
        border-radius: 35rpx;
        .paddings(10rpx, 10rpx, 10rpx, 33rpx);
    }

    .weui-search-bar__box {
        position: relative;
        padding-left: 30px;
        padding-right: 30px;
        width: 100%;
        box-sizing: border-box;
        z-index: 1;
    }

    .weui-search-bar__input {
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        margin-left: 110rpx;
        width: 340rpx;
        overflow: hidden; //溢出隐藏
        white-space: nowrap; //禁止换行
        text-overflow: ellipsis; //...
    }

    .weui-icon-clear {
        position: absolute;
        top: 0;
        right: 0;
        padding: 7px 8px;
        font-size: 0;
    }

    .weui-search-bar__label {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        border-radius: 3rpx;
        text-align: center;
        color: #9B9B9B;
        background: #FFFFFF;
        line-height: 28px;
    }

    .weui-search-bar__cancel-btn {
        margin-left: 10px;
        line-height: 28px;
        color: #09BB07;
        white-space: nowrap;
        font-size: 30rpx;
    }

    .img {
        width: 44rpx;
        height: 44rpx;
        margin-top: 36rpx;
    }

    .tipInfo {
        .kuangao(14rpx, 14rpx);
        .position(absolute, 20rpx, 34rpx, 0, auto);
        .borderradius(7rpx, 7rpx, 7rpx, 7rpx);
        background: @orange;
    }

    .search_txt {
        .fontsize(30rpx);
        font-family: PingFang SC;
        font-weight: bold;
        color: @blue;
        margin-left: 23rpx;
    }
}

.kobai {
    height: 115rpx;
}




</style>
